import React, { Component } from 'react';
import '../../scss/Banner.scss';
import { index_banner } from '../../tools/api'

import 'antd/dist/antd.css';
import { Carousel } from 'antd';

const contentStyle = {
    height: '200px',
    color: '#fff',
    lineHeight: '160px',
    textAlign: 'center',
    background: '#364d79',
  };


class Banner extends Component {
    state = {
        bannerArr:[]
    }
    render() {
        return (
            <div className='banner'>
                <div className="img">
                    <Carousel autoplay>
                            {
                                this.state.bannerArr.map((item,index)=>{
                                    return (
                                        <div className='im' key={ index }>
                                            <h3 style={contentStyle}><img src={ item.pic } alt="" /></h3>
                                        </div>
                                    )
                                })
                            }
                    </Carousel>
                </div>
            </div>
        );
    }

    componentDidMount() { index_banner().then( response => { this.setState( { bannerArr:response.data.list } ) } ) }
}

export default Banner;